<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ZJGS2022届八班</title>
    <style>
      body {
        margin: 0;
        height: 100vh;
        background-color: #eee;
      }
      h4{
        margin: 10px;
        padding: 0px;
        font-size: 14px;
      }
      .flex {
        display: flex;
      }
      .shadow {
        box-shadow: rgb(0 0 0/ 20%) 0px 2px 1px -1px,
          rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px;
      }
      .baiSe {
        background-color: white;
      }
      .flex1 {
        flex: 1;
      }
      .column {
        flex-direction: column;
      }
      .mg8 {
        margin: 8px;
      }
      .mgr8 {
        margin-right: 8px;
      }
      .mgt8 {
        margin-top: 8px;
      }
      .daoHang {
        padding: 15px 20px;
        border-bottom: 2px solid rgb(190, 190, 190);
        font-size: 15px;
        color: #666;
      }
      .zhaopian{
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 90%;
        max-height: 500px;
        min-height: 150px;
      }
      /*当屏幕宽度小于600的时候要改变的css*/
      @media (max-width: 2000px) {
        .ceBian {
          display: none;
        }
        .neiRongLan {
          flex-direction: column;
        }
        .shuJuQu {
          flex-direction: column;
        }
        .youQu {
          margin-left: 8px;
        }
        .shuJu {
          margin: 0 0 0;
          flex: auto;
        }
        /*移除滚动条*/
        .neiRongLan::-webkit-scrollbar {
          display: none;
        }
      }
      @media (max-width: 700px) {
        .biaoti {
          display: none;
        }
      }
    </style>
  </head>
  <body class="flex">
    <!--侧边栏-->
    <div style="width: 25%; min-width: 85px; max-width: 200px; z-index: 2" class="baiSe shadow">
      <!--头像栏-->
      <div
        style="
          padding: 8px;
          padding-left: 20px ;
          
          align-items: center;
          border-bottom: 3px solid #999;
          max-height: 100px;
        "
        class="flex"
      >
        <img
          alt=""
          src="../images/bg.webp"
          width="50px"
          height="50px"
        />
        <p style="margin-left: 10px" class="biaoti">八班的网站</p>
      </div>
      <!--导航栏-->
      <div class="flex1 flex column">
        <!--导航条-->
        <div class="daoHang">
          <a href="../index.html"><b>首页></b></a>
        </div>
        <div class="daoHang">
          <a href="./YuChu.html"><b>预初></b></a>
        </div>
        <div class="daoHang">
          <a href="./ChuYi.html"><b>初一></b></a>
        </div>
        <div class="daoHang">
          <a href="./ChuEr.html"><b>初二></b></a>
        </div>
        <div class="daoHang">
          <a href="./ChuSan.html"><b>初三></b></a>
        </div>
        <div class="daoHang">
          <a href="./BanShi.html"><b>班史></b></a>
        </div>
        <div class="daoHang">
          <a href="./LaoShi.html"><b>老师></b></a>
        </div>
        <div class="daoHang">
          <a href="./TongXue.html"><b>同学></b></a>
        </div>
        <div class="daoHang">
          <a href="./end.html"><b>最后></b></a>
        </div>
        <div class="daoHang">
          <a href="./BanQuan.html"><b>关于></b></a>
        </div>
      </div>
    </div>
    <!--主区域-->
    <div class="flex1 flex column">
      <!--头部栏-->
      <div
        style="
          padding: 8px;
          height: 60px;
          z-index: 1;
          justify-content: center;
          align-items: center; ;
        "
        class="baiSe shadow mg8 flex"
      >
        <h1>预初—初逢</h1>
      </div>
      <!--内容区-->
      <div style="overflow: auto" class="flex1 flex shadow neiRongLan">
        <!--左区-->
        <div style="flex: 3" class="column flex mg8 shadow">
          <!--提示区-->
          
          <!--消息区-->
          <div
            style="height: auto; align-items: center"
            class="baiSe mgt8 shadow flex column"
          >
          <div style="height: 100%;margin-left: 3%;margin-right: 3%;" class="flex column">
          <h3 style="align-self: center;">大事记</h3>
            <p>
              - 2018 年 8 月 4
              日，第一次入校，发现了同班48位学霸，感到巨大压力。
            </p>
            <p>
              - 2018 年 8 月 16—17
              日，召开预初年级军训活动，增强同学们的意志品质。
            </p>
            <p>- 2018 年 9 月 30 日，预初年级义卖，奉献爱心。</p>
            <p>- 2018 年 10 月 8 日，第一次月考，体会到与学霸们的差距。</p>
            <p>
              - 2018 年 11
              月小型运动会，获得年级广播体操第一名，武术操第三名奖项。
            </p>
            <p>
              - 2018 年 12 月 26
              日，在中国科技大学观看校园文化艺术节，十分震撼。
            </p>
            <p>- 2019 年 4 月 12 日，参与科技节活动，获得许多知识。</p>
            <p>- 2019 年 4 月 18 日，前往共青森林公园，了解复杂的社会。</p>
            <p>
              - 2019 年 5 月 31
              日，参与“红歌唱响，童心向党”六一红歌会，取得荣誉。
            </p>
            <p>
              - 2019 年 6 月 13 日，班主任节，八班同学永远紧紧追随陈萍萍老师！
            </p>
          </div>
            
          </div>
          <!--数据区-->
          <!--列表区-->
          <div class="flex column">
            <!--列表项-->
            <div
              style="height:  250px; align-items: center"
              class="baiSe mgt8 shadow flex column"
            >
              <h4>军训！</h4>
              <div class="zhaopian">
                <img src="../images/01.webp" width="" height="85%" />
              </div>
              
            </div>
            <div
              style="height:  250px; align-items: center"
              class="baiSe mgt8 shadow flex column"
            >
              <h4>还是军训！</h5>
              <div class="zhaopian">
                <img src="../images/02.webp"  height="85%" />
              </div>
              
            </div>
            <div
              style="height:  250px; align-items: center"
              class="baiSe mgt8 shadow flex column"
            >
              <h4>第一次运动会！</h4>
              <div class="zhaopian">
                <img
                src="../images/03.webp"
                alt="运动会"
                width=""
                height="85%"
              />
              </div>
              
            </div>
            <div
              style="
                height: 250px;
                align-items: center;
                justify-content: center;
              "
              class="baiSe mgt8 shadow flex column"
            >
              <h4>在观看ing</h4>
              <div class="zhaopian">
                <img src="../images/04.webp" alt="运动会"height="85%" />
              </div>
              
            </div>
            <div
              style="
                height: 250px;
                align-items: center;
                justify-content: center;
              "
              class="baiSe mgt8 shadow flex column"
            >
              <h4>准备运动会入场！</h4>
              <div class="zhaopian">
                <img src="../images/05.webp" alt="运动会" height="85%" >
              </div>
              
            </div>
            <div
              style="
                height: 250px;
                align-items: center;
                justify-content: center;
              "
              class="baiSe mgt8 shadow flex column"
            >
              <h4>第一次运动会！合影耶！</h4>
              <div class="zhaopian">
                <img src="../images/06.webp" alt="运动会" height="85%" />
              </div>
              
            </div>
            <div
              style="
                height: 250px;
                align-items: center;
                justify-content: center;
              "
              class="baiSe mgt8 shadow flex column"
            >
              <h4>芜湖科技节！</h4>
              <div class="zhaopian">
                <img src="../images/07.webp" alt="科技节"  height="85%" />
              </div>
              
            </div>
            <div
              style="
                height: 250px;
                align-items: center;
                justify-content: center;
              "
              class="baiSe mgt8 shadow flex column"
            >
              <h4>机器人!</h4>
              <div class="zhaopian">
                <img src="../images/08.webp" alt="科技节"  height="85%" />
              </div>
              
            </div>
            <div
              style="
                height: 250px;
                align-items: center;
                justify-content: center;
              "
              class="baiSe mgt8 shadow flex column"
            >
              <h4>哈哈当时背着小旗子到处走！</h4>
              <div class="zhaopian">
                <img src="../images/09.webp" alt="科技节"  height="85%" />
              </div>
              
            </div>
            <div
              style="
                height: 250px;
                align-items: center;
                justify-content: center;
              "
              class="baiSe mgt8 shadow flex column"
            >
              <h4>家长进课堂咯</h4>
              <div class="zhaopian">
                <img src="../images/10.webp" alt="家长进课堂"  height="85%" />
              </div>
              
            </div>
            <div
              style="
                height: 250px;
                align-items: center;
                justify-content: center;
              "
              class="baiSe mgt8 shadow flex column"
            >
              <h4>春游！春游！春游！</h4>
              <div class="zhaopian">
                <img src="../images/11.webp" alt="春游"  height="85%" />
              </div>
              
            </div>
            <div
              style="
                height: 250px;
                align-items: center;
                justify-content: center;
              "
              class="baiSe mgt8 shadow flex column"
            >
              <h4>六一红歌会</h4>
              <div class="zhaopian">
                <img src="../images/12.webp" alt="六一歌会"  height="85%" />
              </div>
              
            </div>
            <div
              style="
                height: 250px;
                align-items: center;
                justify-content: center;
              "
              class="baiSe mgt8 shadow flex column"
            >
              <h4>演出前的排练（</h4>
              <div class="zhaopian">
                <img src="../images/13.webp" alt="六一歌会" width="95px" height="85%" />
              </div>
              
            </div>
            <div
              style="
                height: 250px;
                align-items: center;
                justify-content: center;
              "
              class="baiSe mgt8 shadow flex column"
            >
              <h4>六一红歌会 合影~~</h4>
              <div class="zhaopian">
                <img src="../images/14.webp" alt="六一歌会"  height="85%" />
              </div>
              
            </div>
            <div
              style="
                height: 250px;
                align-items: center;
                justify-content: center;
              "
              class="baiSe mgt8 shadow flex column"
            >
              <h4>演出ing</h4>
              <div class="zhaopian">
                 <img src="../images/15.webp" alt="六一歌会"  height="85%" />
              </div>
             
            </div>
            <div
              style="
                height: 250px;
                align-items: center;
                justify-content: center;
              "
              class="baiSe mgt8 shadow flex column"
            >
              <h4>观看ing（↓有个人笑得很开心）</h4>
              <div class="zhaopian">
                <img src="../images/16.webp" alt="六一歌会"  height="85%" />
              </div>
              
            </div>
            <div
              style="
                height: 250px;
                align-items: center;
                justify-content: center;
              "
              class="baiSe mgt8 shadow flex column"
            >
              <h4>第一次义卖！</h4>
              <div class="zhaopian">
                <img src="../images/17.webp" alt="义卖"  height="85%" />
              </div>
              
            </div><div
              style="
                height: 250px;
                align-items: center;
                justify-content: center;
              "
              class="baiSe mgt8 shadow flex column"
            >
              <h4>好多好多代币！！</h4>
              <div class="zhaopian">
                <img src="../images/18.webp" alt="义卖"  height="85%" />
              </div>
              
            </div>
            <div
              style="
                height: 250px;
                align-items: center;
                justify-content: center;
              "
              class="baiSe mgt8 shadow flex column"
            >
              <h4>班主任节 我们的萍萍老师~</h4>
              <div class="zhaopian">
                <img src="../images/19.webp" alt="班主任节"  height="85%" />
              </div>

              
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </body>
</html>
